
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
      .cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;margin: 10px auto;}
      .cart-title {margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight: 700;text-indent: 15px;color: #333;font-family: 'Microsoft YaHei';}
      .cart-table{width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333;}
      .cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height: 23px;}
      .cart-item {background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}
      .cart-item td{height: 55px;text-align: center;}
      .cart-item .cart-txt-left{text-align:left;}
      .cart-name{color: #3366D4;font-weight: bold;}
      .cart-subtotal{color: #FF3334;font-weight: bold;}
      .cart-reduce,.cart-add{display:inline-block;width: 16px;height: 16px;line-height:16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial';font-size:13.3333px;}
      .cart-reduce:hover,.cart-add:hover{background-color: #FF9900;}
      .cart-num {margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display:inline-block;background:#fff;border:1px solid #bbb}
      .cart-del,.cart-all{color: #3366D4;}
      .cart-del:hover,.cart-all:hover{text-decoration:underline;cursor:pointer}
      .cart-bottom{height: 55px;text-align:right}
      .cart-bottom .cart-all{position:relative;top:1px}
      .cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}
      .cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}
      .cart-bottom-btn:hover{background: #FF6600;}
      p{text-align: center;}
    </style>
  </head>
  <body>
    <div class="cart">
      <div class="cart-title">我的购物车</div>
      <table class="cart-table">
        <tr>
          <th width="60"><span class="cart-all">全选</span></th><th>商品</th><th width="120">单价</th><th width="100">数量</th><th width="120">小计</th><th width="80">操作</th>
        </tr>
        <tr class="cart-item">
          <td><input class="cart-check" type="checkbox" checked></td>
          <td class="cart-txt-left"><span class="cart-name">Loading...</span></td>
          <td><span class="cart-price">0</span></td>
          <td><span class="cart-reduce" >-</span><span class="cart-num">0</span><span class="cart-add">+</span></td>
          <td><span class="cart-subtotal">0</span></td>
          <td><span class="cart-del">删除</span></td>
        </tr>
        <tr class="cart-bottom">
          <td colspan="6">
            <span class="cart-bottom-span">已选择 <span class="cart-total-num">0</span> 件商品</span>
            <span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span>
            <span class="cart-bottom-btn">提交订单</span>
          </td>
        </tr>
      </table>
    </div>
    <script >

(function(window) {
    /**
     * ShopCart 购物车
     * @param {String} prefix 前缀
     * @param {Array} defCart 初始数据 [{name: '', price: 1, num: 1}]
     */
    var ShopCart = function(prefix, defCart) {
      Find.prototype.prefix = prefix;
      var cart = new Cart(document.getElementsByClassName(prefix)[0]);
      for (var i in defCart) {
        cart.add(defCart[i]);
      }
      cart.updateTotal();
    };
    /**
     * Cart 购物车商品管理
     * @constructor
     * @param {Object} obj 购物车容器对象
     */
    function Cart(obj) {
      this.items = [];
      var find = new Find(obj);
      this.all = find.className('all');
      this.bottom = find.className('bottom');
      this.num = find.className('total-num');
      this.price = find.className('total-price');
      this.tmp = find.className('item');
      this.tmp.parentNode.removeChild(this.tmp);
      var cart = this;
      this.all.onclick = function() {
        cart.checkAll();
      };
    }
    Cart.prototype = {
      /**
       * 向购物车中添加商品
       * @param {Object} data 商品信息
       */
      add: function(data) {
        var tmp = this.tmp.cloneNode(true);
        var item = new Item(tmp, data);
        var cart = this;
        // 勾选
        item.check.onclick = function () {
          cart.updateTotal();
        };
        // 增加数量
        item.add.onclick = function() {
          item.num.textContent = ++item.data.num;
          item.updateSubtotal()
          cart.updateTotal();
        };
        // 减少数量
        item.reduce.onclick = function() {
          if (item.data.num > 1) {
            item.num.textContent = --item.data.num;
            item.updateSubtotal();
            cart.updateTotal();
          } else {
            alert('至少选择1件，如果不需要，请直接删除');
          }
        };
        // 删除商品
        item.del.onclick = function() {
          if (confirm('您确定要删除此商品吗？')) {
            tmp.parentNode.removeChild(tmp);
            cart.del(item);
            cart.updateTotal();
          }
        };
        // 更新小计
        item.updateSubtotal();
        // 保存新增的商品对象
        this.items.push(item);
        // 放入购物车容器中
        this.bottom.before(tmp);
      },
      /**
       * 删除保存的商品对象
       * @param {Object} item 待删除的商品对象
       */
      del: function(item) {
        for (var i in this.items) {
          if (this.items[i] === item) {
            delete this.items[i];
          }
        }
      },
      /**
       * 更新总计
       */
      updateTotal: function() {
        var num = 0, price = 0;
        for (var i in this.items) {
          var item = this.items[i];
          if (item.check.checked) {
            num += item.data.num;
            price += item.data.num * item.data.price;
          }
        }
        this.num.textContent = num;
        this.price.textContent = price.toFixed(2);
      },
      /**
       * 全选
       */
      checkAll: function() {
        for (var i in this.items) {
          this.items[i].check.checked = true;
        }
        this.updateTotal();
      }
    };
    /**
     * Item 购物车中的单件商品
     * @constructor
     * @param {String} tmp 模板
     * @param {Array} data 数据
     */
    function Item(tmp, data) {
      var find = new Find(tmp);
      this.check = find.className('check');
      this.name = find.className('name');
      this.price = find.className('price');
      this.num = find.className('num');
      this.add = find.className('add');
      this.reduce = find.className('reduce');
      this.subtotal = find.className('subtotal');
      this.del = find.className('del');
      this.data = data;
      this.name.textContent = data.name;
      this.price.textContent = data.price.toFixed(2);
      this.num.textContent = data.num;
    }
    Item.prototype = {
      /**
       * 更新小计
       */
      updateSubtotal: function() {
        this.subtotal.textContent = (this.data.num * this.data.price).toFixed(2);
      }
    };
    /**
     * Find 查找器
     * @constructor
     * @param {Object} obj 待查找对象所在容器
     */
    function Find(obj) {
      this.obj = obj;
    }
    Find.prototype = {
      prefix: '',
      /**
       * 按照class查找元素
       * @param {string} className
       */
      className: function(className) {
        return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
      }
    };
    window['ShopCart'] = ShopCart;
  })(window);
    </script>
    <script>
      ShopCart('cart', [
        {name: 'JavaScript实战', price: 45.8, num: 1},
        {name: 'PHP基础案例教程', price: 49.8, num: 2},
        {name: 'HTML+CSS网页制作', price: 45.2, num: 5},
        {name: 'Java基础入门', price: 45, num: 8},
      ]);
    </script>
    <p><a href="diqizhang.html">返回第七章</a></p>
    <p><a href="default.html">返回目录</a></p>
  </body>
</html>